<template>
  <div>
    <canvas id="c"></canvas>
    <div id="messageBoard">
      <h2>留言板</h2>
      <div id="messages">

        <div v-for="(msg, index) in messages" :key="index" class="message">
          {{ msg }}
        </div>
      </div>
      <textarea v-model="message" placeholder="输入留言..."></textarea>
      <button @click="addMessage">提交</button>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      chinese: "01101110",
      font_size: 10,
      columns: 0,
      drops: [],
      welcomeMessage: "欢迎来到麦克斯韦方程组的博客系统",
      welcomeFontSize: 30,
      message: "", // 用户输入的留言
      messages: [], // 显示的留言数组
      messageBoardHeight: 200, // 留言板高度
      messageBoardWidth: 400, // 留言板宽度
      messageFontSize: 16, // 留言字体大小
    };
  },
  mounted() {
    this.canvas = document.getElementById("c");
    this.ctx = this.canvas.getContext("2d");
    this.initCanvas();
    this.initDrops();
    setInterval(this.draw, 50);
  },
  methods: {
    initCanvas() {
      this.canvas.height = window.innerHeight;
      this.canvas.width = window.innerWidth;
      this.columns = this.canvas.width / this.font_size;
    },
    initDrops() {
      for (let x = 0; x < this.columns; x++) {
        this.drops[x] = 1;
      }
    },
    draw() {
      this.ctx.fillStyle = "rgba(0,0,0,0.05)";
      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

      this.ctx.fillStyle = "#0F0";
      this.ctx.font = this.welcomeFontSize + "px arial";
      const textWidth = this.ctx.measureText(this.welcomeMessage).width;
      const textX = (this.canvas.width - textWidth) / 2;
      const textY = this.welcomeFontSize;
      this.ctx.fillText(this.welcomeMessage, textX, textY);

      this.ctx.fillStyle = "#0F0";
      this.ctx.font = this.font_size + "px arial";
      for (let i = 0; i < this.drops.length; i++) {
        const text = this.chinese[Math.floor(Math.random() * this.chinese.length)];
        this.ctx.fillText(text, i * this.font_size, this.drops[i] * this.font_size);

        if (this.drops[i] * this.font_size > this.canvas.height && Math.random() > 0.975) {
          this.drops[i] = 0;
        }
        this.drops[i]++;
      }


    },
    addMessage() {
      if (this.message.trim() !== "") {
        this.messages.push(this.message);
        this.message = "";
      }
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

body {
  background: black;
}

canvas {
  display: block;
}

#messageBoard {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; /* 调整留言板宽度为屏幕宽度的60% */
  min-height: 500px; /* 设置最小高度，确保有足够的空间显示留言 */
  background: rgba(0, 0, 0, 0.5); /* 设置为半透明黑色 */
  border-radius: 10px; /* 可选：添加圆角 */
  color: #ffffff;
  padding: 20px; /* 增加内边距 */
}

#messageBoard h2 {
  margin-bottom: 20px; /* 增加标题与留言之间的间距 */
}

#messageBoard #messages {
  margin-top: 10px; /* 增加留言区域与标题之间的间距 */
}

#messageBoard textarea {
  width: calc(100% - 40px); /* 调整文本框宽度，留出内边距 */
  height: 80px; /* 调整文本框高度 */
  margin-bottom: 10px;
  padding: 20px; /* 增加内边距 */
  color: black;
  background: rgb(255, 255, 255); /* 文本框背景设为半透明白色 */
  border: none; /* 去掉边框 */
  outline: none; /* 去掉聚焦时的轮廓 */
}

#messageBoard button {
  padding: 5px 10px;
  background-color: #0F0;
  color: white;
  border: none;
  cursor: pointer;
  float: right; /* 可选：将按钮放置在文本框右侧 */
}

#messageBoard button:hover {
  background-color: #00CC00;
}
</style>
